<!--
 * @Description: 余料信息
-->
<template>
    <el-dialog :visible="visible" :title="config.type === 1 ? '余料翻料信息' : '余料处理信息'" width="1000px" @close="onClose" @open="onOpen">
        <div id="yuliaoxinxi">
            <div class="table_box">
                <Table
                    ref="table"
                    :columns="columns"
                    :remote="fetchTableData"
                    :showPagination="config.type !== 3"
                    @selected="(e) => { selectData = e }"
                ></Table>
            </div>

            <span slot="footer" class="dialog-footer">
                <el-button class="bottom_all_two" @click="onClose">取 消</el-button>
                <el-button class="bottom_all" type="primary" @click="onConfirm">确 定</el-button>
            </span>
        </div>
    </el-dialog>
</template>

<script>
    import Table from './Table.vue'
    import { formatTable } from '@/utils/index';
    import {query_page, getResidualTreatment, get_queue_up_inform } from '@/api/smart/schedul/k.js'
    // turnoverTreatment

    export default {
        components: {
            Table
        },
        data() {
            return {
                columns: [],
                radio: '',
                dataList: [],
            };
        },
        props: {
            config: {
                type: Object,
                default: () => ({}),
            },
            visible: {
                type: Boolean,
            },
        },
        watch: {
            visible: {
                handler: function(newVal){
                    this.radio = '';
                    if(newVal) this.$nextTick(()=>{this.loadType('fetch')})
                },
                deep: true
            }
        },
        methods: {
            async fetchTableData(pagination) {
                let params = {};
                let res = {};
                if(this.config.type === 1) { // 余料翻料信息
                    params = {
                        ...pagination,
                        stationId: this.config.stationId
                    }
                    res = await query_page(params)
                    this.dataList = res.data.data;
                    return formatTable({data: res.data.data, ...pagination, total: res.data.totalRows} || {});
                }
                if (this.config.type === 2) { // 余料处理信息
                    params = {
                        ...pagination,
                        carNo: '',
                        surplusStatus: 1,
                        stationId: this.config.stationId
                    }
                    res = await getResidualTreatment(params)
                    this.dataList = res.data.data;
                    return formatTable({data: res.data.data, ...pagination, total: res.data.totalRows} || {});
                }
                if (this.config.type === 3) { // 车辆排队信息
                    res = await get_queue_up_inform()
                    this.dataList = res.data;
                    return formatTable({data: res.data, ...pagination, total: res.data.length} || {});
                }
            },
            // 查询
            async loadType(type) {
                if (this.$refs.table && this.$refs.table[type]) {
                    if (type === 'refetch') {
                        this.loading = true;
                    }
                    await this.$refs.table[type]();
                    if (type === 'refetch') {
                        this.loading = false;
                    }
                }
            },
            onOpen() {
                if(this.config.type === 1) { // 余料翻料信息
                    this.columns = [
                        {label: '选择', prop: '' , width: '50px', render: (scope)=><el-radio label={scope.$index} v-model={this.radio} />},
                        {label: '订单编号', prop: 'orderNo'},
                        {label: '工程名称', prop: 'engineeringName'},
                        {label: '浇筑部位', prop: 'structuralParts'},
                        {label: '产品名称', prop: 'productName'},
                        {label: '物流号', prop: 'logisticsCode'},
                        {label: '车牌号', prop: 'carNo'},
                        {label: '生产站点', prop: 'stationName'},
                        {label: '翻料量', prop: 'outCount'},
                        {label: '离场时间', prop: 'leaveTime'},
                        {label: '处理备注', prop: 'remark'},
                    ]
                    
                } 
                if (this.config.type === 2) { // 余料处理信息
                    this.columns = [
                        {label: '选择', prop: '' , width: '50px', render: (scope)=><el-radio label={scope.$index} v-model={this.radio} />},
                        {label: '物流号', prop: 'code'},
                        {label: '车牌号', prop: 'carNo'},
                        {label: '生产站点', prop: 'productionSite'},
                        {label: '转料站点', prop: 'turnStationName'},
                        {label: '余料量', prop: 'residueNum'},
                        {label: '处理类型', prop: '', render:({row})=>['','转料','报废','积鼓'][row.exceptionType]},
                        {label: '离场时间', prop: 'leaveTime'},
                        {label: '余料状态', prop: '', render:({row})=>['','待处理','待提交','已处理'][row.surplusStatus]},
                        {label: '处理备注', prop: 'remark'},
                    ]
                }
                if (this.config.type === 3) { // 余料处理信息
                    this.columns = [
                        {label: '选择', prop: '' , width: '50px', render: (scope)=><el-radio label={scope.$index} v-model={this.radio} />},
                        {label: '车牌号', prop: 'carNo'},
                        {label: '司机', prop: 'productionSite'},
                        {label: '余料量', prop: 'oddmentsNum'},
                        {label: '离场时间', prop: 'leaveTime'},
                    ]
                }
            },
            onClose() {
                this.$emit("update:visible", false)
            },
            async onConfirm() {
                if(this.radio === '') return this.$message.info("请选择数据")
                if(!this.dataList[this.radio]) return this.$message.info("数据选择有误")
                const selectd = {
                    type: this.config.type,
                    ...this.dataList[this.radio]
                }
                this.$emit("updated", selectd)
                this.$emit("update:visible", false)
            },
        },
    };
</script>
<style lang="scss">
#yuliaoxinxi {
    .el-radio__label {
        display: none;
    }
}

</style>